<template>
	<div class="x-chart">
		<div v-if="settings.type=='map'">
			<ve-map :grid="grid" :data="viewModel" :extend="extend" :colors="colors" height="800px"></ve-map>
		</div>
		<div v-else-if="settings.type=='scatter'">
			<ve-scatter :data-zoom="chartDataZoom" :grid="grid" :data="viewModel" :extend="extend" :colors="colors"></ve-scatter>
		</div>
		<div v-else-if="settings.type=='candle'">
			<ve-candle :data-zoom="chartDataZoom" :data="viewModel" :extend="extend"></ve-candle>
		</div>
		<div v-else>
			<ve-chart :data-zoom="chartDataZoom" :grid="grid" :data="viewModel" :extend="extend" :colors="colors" :settings="settings"></ve-chart>
		</div>
	</div>
</template>
<script>
	export default {
		props: {
			type: {},
			grid: {},
			data: {},
			extend: {},
			colors: {},
			settings: {},
			chartDataZoomType: {}
		},
		mounted() {
			this.init()
		},
		data() {
			return {
				viewModel: null,
				chartDataZoom: []
			}
		},
		methods: {
			async init(data) {
				this.$forceUpdate()
				if (this.chartDataZoomType) {
					this.chartDataZoom.push({
						type: this.chartDataZoomType
					})
				}
				if (data) {
					this.viewModel = data
					var value = this.viewModel.columns[0]
					this.$set(this.viewModel.columns, 0, value)
					this.$forceUpdate()
				} else {
					this.viewModel = this.data
				}
			}
		},
		watch: {
			data: {
				deep: true,
				handler(val) {
					this.viewModel = this.data
				}
			}
		}
	}
</script>